<template>
  <div class="container">
    
    <el-carousel>
      <el-carousel-item v-for="item of banner" :key="item._id">
        <nuxt-link :to="{name:'goods-id',params:{id:item._id},query:{collectionName:'banner'}}">
          <img :src="item.banner" class="img">
          <div class="title_bg">
            <h3 class="title">{{item.title}}</h3>
            <h4 class="sub_title">{{item.sub_title}}</h4>
          </div>
        </nuxt-link>
      </el-carousel-item>
    </el-carousel>
    
    
    <el-row class="home" :gutter="20">
      <el-col :span="6" v-for="item of home" :key="item._id">
        <el-card :body-style="{padding:'0px'}" style="margin-bottom:20px">
          <nuxt-link :to="{name:'goods-id',params:{id:item._id},query:{collectionName:'home'}}">
            <img :src="item.detail.auth_icon" alt="" class="image">
          </nuxt-link>
          
          <div style="padding:14px;">
            <span>{{item.title}}</span>
            <div class="bottom clearfix">
              <time class="time">{{item.time}}</time>
              <el-button class="button" type="warning" icon="el-icon-star-off" circle></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <h4>vuex操作</h4>
    <button @click="getStore">编程式操作</button>
    <div>inddex getters:{{getNav}}</div>
    <div>inddex state:{{bNav}}</div>
    <div>user state: {{data}}</div>
  </div>
</template>

<script>
import {mapActions, mapGetters, mapState, mapMutations} from 'vuex'
export default {

  async asyncData({$axios}){
    let res = await $axios({url:'/data/list.json'})
    // console.log('读取到的静态资源',res.data)
    
    //读取跨域数据
    let res2 = await $axios({url:'/api/goods/banner',params:{_limit:3}})
    // console.log('读取到的跨域资源',res2.data)

    return {
      title:res.data.title,
      banner:res2.data.data
    }
  },

  async fetch({$axios,store,error}){
    let res2 = await $axios({url:'/api/goods/home',params:{_limit:20}})
    // console.log('res',res.data.title)
    res2.data && store.commit('home/M_UPDATE_HOME',{err:0,data:res2.data.data})
    
  },
  
  components: {
  },

  methods:{
    getStore(){
      //编程式访问vuex

      //发出actions请求给user模块
      // this.$store.dispatch('user/A_UPDATE_USER',{err:0,msg:'登录成功',token:'假token',data:{title:"user模块的actions提交过来的数据"}})
      // this.A_UPDATE_USER({err:0,msg:'登录成功',token:'假token',data:{title:"123"}})
      
      //发出mutations请求给user模块
      // this.$store.commit('user/M_UPDATE_USER',{err:0,msg:'登录成功',token:'假token',data:{title:"组件携带过去的数据"}})
      this.M_UPDATE_USER({err:0,msg:'登录成功',token:'假token',data:{title:"456"}})
    },

    ...mapActions('user',['A_UPDATE_USER']),
    ...mapMutations('user',['M_UPDATE_USER']),
  },

  computed:{
    xx(){},
    ...mapGetters(['getNav']),
    ...mapState(['bNav']),
    ...mapState('user',['data']),
    ...mapState({home:state=>state.home.data}),
  }


  
}
</script>

<style scoped>
.el-carousel__item .img {
  width: 100%;
  height: auto;
}

.el-carousel__item .title_bg{
  background: rgba(0,0,0,0.5);
  color:#fff;
  height: 60px;
  width:100%;
  position: absolute;
  left:0;bottom: 0px;
  z-index: 999;
}
.home{
  margin-top:20px;
}
.time{
  font-size: 13px;
  color:#999;
}
.bottom{
  margin-top: 13px;
  line-height: 12px;
}
.image{
  width: 100%;
  display: block;
}
.button{
  padding:0;
  float: right;
}
</style>
